Day 23：Chrome Storage 儲存機制

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

💻 作者：輔大智慧資安 412580084

📅 Day 23：Chrome Storage 儲存機制

🔗 課程系列回顧

昨天 Day 22 我們建立了多時段處理功能，今天我們要將這些處理好的課程資料安全地儲存起來，使用 Chrome Storage API 建立基本的資料儲存機制。

📋 學習目標

今天我們要完成：

1. 💾 設計標準資料結構
2. ✅ 實作資料驗證機制
3. 🔄 基礎 Chrome Storage 操作
4. 🧪 簡易測試功能

💾 基礎資料結構設計

1.1 課表資料管理器

建立簡潔的資料儲存管理器：

📋 設計理念：建立統一的資料格式，確保資料的一致性和可維護性。

🔧 實作原理：ScheduleDataManager 類別專門負責資料的建立、驗證和基本操作。

// 課表資料結構管理器 - 精簡版
class ScheduleDataManager {
  constructor() {
    this.storageKey = 'fjuScheduleData';
    this.log('💾 課表資料管理器初始化完成');
  }

  // 建立標準資料結構
  createDataStructure(studentInfo, courses) {
    return {
      學期: studentInfo.semester || '未知學期',
      學生資訊: {
        系級: studentInfo.department,
        學號: studentInfo.studentId,
        姓名: studentInfo.name,
        總學分: studentInfo.totalCredits
      },
      課程清單: courses || [],
      更新時間: new Date().toISOString(),
      版本: '1.0'
    };
  }

  // 驗證資料完整性
  validateData(data) {
    const errors = [];
    
    // 檢查必要欄位
    if (!data.學生資訊?.學號) {
      errors.push('缺少學號資訊');
    }
    
    if (!data.課程清單 || !Array.isArray(data.課程清單)) {
      errors.push('課程清單格式錯誤');
    }
    
    return {
      isValid: errors.length === 0,
      errors: errors
    };
  }

  // 日誌輸出
  log(message) {
    console.log(`[ScheduleDataManager] ${message}`);
  }
}

🔄 Chrome Storage 基礎操作

2.1 儲存功能

實作基本的資料儲存與讀取：

📋 設計理念：Chrome Storage API 提供更大的儲存空間和更好的效能。

🔧 實作原理：將原本基於回調函數的 API 封裝成 Promise，讓程式碼更加清晰。

// 在 ScheduleDataManager 類別中新增以下方法
class ScheduleDataManager {
  // ... 原有方法 ...

  // 儲存課表資料
  async saveScheduleData(studentInfo, courses) {
    try {
      this.log('開始儲存課表資料');
      
      // 建立標準資料結構
      const scheduleData = this.createDataStructure(studentInfo, courses);
      
      // 驗證資料
      const validation = this.validateData(scheduleData);
      if (!validation.isValid) {
        throw new Error(`資料驗證失敗: ${validation.errors.join(', ')}`);
      }
      
      // 儲存到 Chrome Storage
      await new Promise((resolve, reject) => {
        chrome.storage.local.set({
          [this.storageKey]: scheduleData
        }, () => {
          if (chrome.runtime.lastError) {
            reject(new Error(chrome.runtime.lastError.message));
          } else {
            resolve();
          }
        });
      });
      
      this.log('✅ 課表資料儲存成功');
      return { success: true, data: scheduleData };
      
    } catch (error) {
      this.log(`❌ 儲存失敗: ${error.message}`);
      return { success: false, error: error.message };
    }
  }

  // 讀取課表資料
  async loadScheduleData() {
    try {
      this.log('開始讀取課表資料');
      
      const result = await new Promise((resolve, reject) => {
        chrome.storage.local.get([this.storageKey], (result) => {
          if (chrome.runtime.lastError) {
            reject(new Error(chrome.runtime.lastError.message));
          } else {
            resolve(result);
          }
        });
      });
      
      const scheduleData = result[this.storageKey];
      
      if (!scheduleData) {
        this.log('⚠️ 沒有找到課表資料');
        return { success: false, error: '沒有儲存的課表資料' };
      }
      
      // 驗證讀取的資料
      const validation = this.validateData(scheduleData);
      
      this.log('✅ 課表資料讀取成功');
      return { 
        success: true, 
        data: scheduleData,
        validation: validation
      };
      
    } catch (error) {
      this.log(`❌ 讀取失敗: ${error.message}`);
      return { success: false, error: error.message };
    }
  }
}

🧪 簡易測試功能

測試步驟

1. 在 content.js 中整合時，請按照以下順序加入程式碼：

// 1. 先確保已有 Day 20-22 的基礎架構
// 2. 加入 Day 23 的 ScheduleDataManager 類別
// 3. 加入測試函數：testBasicStorage()
// 4. 手動執行測試（開發階段）：
// testBasicStorage()      // 這個一定要加上去

2. 重新載入插件並進入登入輔大學生選課清單系統

   • 開啟 http://estu.fju.edu.tw（選課清單網域）

3. 在 Application 會看到選課清單已經在 Extension Storage 中並且已經被結構化處理了
   

🎯 明日預告

今天我們建立了基礎的資料儲存機制，明天我們要開始設計課表的 HTML 模板與基礎樣式！